{% extends "layout.html" %}
{% block css %}
<style>
 .form-horizontal select.m-b{padding-top: 3px}
</style>
{% endblock %}
{% block content %}
<body class="gray-bg">
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>成绩管理 <small>成绩列表</small></h5>
                        <div class="ibox-tools"></div>
                    </div>
                    <div class="col-xs-5 col-md-5">
                        <a href="javascript:history.back(-1)"><button type="button" class="btn btn-w-m btn-info"><i class="fa fa-mail-reply"></i> 返回列表</button></a>
                    </div>
                    
                    <div class="ibox-content">
                        <table id="dataTables" class="table table-striped table-bordered table-hover">
                            <thead>
                                <tr>
                                    <th>编号</th>
                                    <th>学期</th>
                                    <th>学生</th>
                                    <th>科目</th>
                                    <th>分数</th>
                                    <th>等级</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                               
                            </tbody>
                            <tfoot>
                                <tr>
                                    <th>编号</th>
                                    <th>学期</th>
                                    <th>学生</th>
                                    <th>科目</th>
                                    <th>分数</th>
                                    <th>等级</th>
                                    <th>操作</th>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <!--查看更多-->
    <div class="modal inmodal fade" id="electiveMoreModal" tabindex="-1" role="dialog"    aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span>
                        <span class="sr-only">关闭</span>
                    </button>
                    <h2 class="modal-title">查看信息</h2>
                </div>
                <div class="modal-body">
                    <div class="ibox-content">
                        <form class="form-horizontal m-t" id="electiveMoreForm">
                            <div class="form-group">

                                <label class="col-sm-3 control-label">学期：</label>
                                <div class="col-sm-7">
                                    <input disabled="disabled" id="show_semester_id"  class="form-control" type="text">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">导师：</label>
                                <div class="col-sm-7">
                                    <input  disabled="disabled" id="show_teacher_id"  class="form-control" type="text" >
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">课程：</label>
                                <div class="col-sm-7">
                                    <input  disabled="disabled" id="show_subject_id"  class="form-control" type="text" >
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">学分：</label>
                                <div class="col-sm-7">
                                    <input  disabled="disabled" id="show_subject_credit"  class="form-control" type="text" >
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">选课时间：</label>
                                <div class="col-sm-7">
                                    <input  disabled="disabled" id="show_start_end_time"  class="form-control" type="text" >
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">学生信息：</label>
                                <div class="col-sm-7">
                                    <input disabled="disabled" id="show_student_name"  class="form-control" type="text">
                                </div>
                            </div>

                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
   
    
</body>
{% endblock %}

{% block script %}
    <!-- Data Tables -->
    <script src="{{url('/assets/js/plugins/dataTables/jquery.dataTables.js')}}"></script>
    <script src="{{url('/assets/js/plugins/dataTables/dataTables.bootstrap.js')}}"></script>

   
    <script>
        $(document).ready(function () {
            // 默认加载
            dataTablesFunction();

        });
        
        // 数据表格
        var dataTablesFunction = function(){
          
            var dataTables = $('#dataTables').dataTable({
                 serverSide: true,
                 lengthChange:false,
                 processing: false,
                 searching: true,
                 destroy: true, //摧毁一个已经存在的Datatables，然后创建一个新的，
                 order: [[1, 'desc'],[ 4, 'desc' ]],
                 ajax: {
                    type: "POST",
                    dataType: 'json',
                    url: "{{ url('/fraction/getdata.html') }}",
                    data: function(data){
                       
                    },
                    complete: function (xhr, ts) {
                       
                        $('.dataTables_filter').hide();  // 提示处理
                    }
                },
                columns: [
                    {"data": "id","name":"id","orderable": false,"searchable": false},
                    {"data": "semester_id","name":"semester_id","searchable": true},
                    {"data": "student_id","name":"student_id","searchable": true},
                    {"data": "subject_id","name":"subject_id","searchable": true},
                    {"data": "score","name":"score","searchable": false},
                    {"data": "score_grade","name":"score_grade","searchable": false},
                    {"data": "action","name":"action","orderable": false,"searchable": false,
                        "render": function (data, type, full, meta) {
                            var button = '<a  class="text-primary" data-row="'+escape(full.elective)+'" data-id="'+data+'" onClick="more(this)"  href="javascript:void(0);">更多</a>';
                            return button;
                        }
                    }
                ]
            });
            return dataTables;
        };


        // 查看更多
        var more  = function(that){
            var id = $(that).attr('data-id');
            var data =  $(that).attr('data-row');
            var row = unescape(data);
            var rowJson = jQuery.parseJSON(row);
            // 设置数据
            $.each(rowJson ,function(index,value){
                $('#show_'+index).val(value);
            });
            console.log(rowJson);
            $('#electiveMoreModal').modal({backdrop: 'static', keyboard: true});
        };
        
    </script>
{% endblock %}